<template>
  <div class="contBox">
    <SearchForm @onShowEdit="onShowEdit" />
    <el-table :data="tableData" border style="width: 100%">
      <template v-for="(columnItem, index) in columns" stripe>
        <el-table-column
          v-if="columnItem.operates"
          :key="index"
          v-bind="columnItem"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="onShowEdit(scope.row)">
              编辑
            </el-button>
            <el-popconfirm title="删除用户？" @onConfirm="delUser(scope.row)">
              <el-button
                slot="reference"
                type="text"
                @click="handleClick(scope.row)"
              >
                删除
              </el-button>
            </el-popconfirm>

            <el-popconfirm
              :title="
                `确认重置用户 ${scope.row.userName}(${
                  scope.row.realName
                })的密码？`
              "
              @onConfirm="onResetUser(scope.row)"
            >
              <el-button slot="reference" type="text">重置密码</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column v-else :key="index" v-bind="columnItem" />
      </template>
    </el-table>
    <RPagination
      :current="current"
      :size="size"
      :total="total"
      @onPageChange="onPageChange"
    />
    <EditUser
      :visible="modalKey === modalKeys.edit"
      @onClose="onHide"
      @onOk="onSubmitEdit"
    />
    <ResetUser :visible="modalKey === modalKeys.reset" @onClose="onHide" />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import EditUser from './components/EditUser'
import ResetUser from './components/ResetUser'
import SearchForm from './components/SearchForm'
import RPagination from '@/components/r-pagination'

export default {
  components: {
    EditUser,
    ResetUser,
    SearchForm,
    RPagination
  },
  data() {
    return {
      modalKeys: {
        edit: 'edit',
        reset: 'reset'
      }
    }
  },
  computed: {
    columns() {
      const columns = [
        {
          label: '用户名',
          prop: 'userName'
        },
        {
          label: '姓名',
          prop: 'realName'
        },
        {
          label: '用户类型',
          prop: 'roleAlias'
        },
        {
          label: '创建时间',
          prop: 'createdDate'
        },
        {
          label: '说明',
          prop: 'remark'
        },
        {
          label: '操作',
          operates: []
        }
      ]

      return columns
    },
    ...mapState('userMg', [
      'loading',
      'tableData',
      'current',
      'size',
      'conditins',
      'total'
    ]),
    ...mapGetters(['modalKey', 'modalData'])
  },

  mounted() {
    this.$store.dispatch('userMg/loadData')
  },

  methods: {
    // 删除
    delUser(row) {
      this.$store.dispatch('userMg/onDelUser', row)
    },

    onResetUser(row = {}) {
      this.$store.dispatch('userMg/onResetUser', {
        ...row,
        modalKey: this.modalKeys.reset
      })
    },

    onShowEdit(data = {}) {
      this.$store.dispatch('showModal', {
        modalKey: this.modalKeys.edit,
        modalData: data
      })
    },
    // 翻页
    onPageChange(current) {
      this.$store.dispatch('userMg/loadData', { current })
    },

    onHide() {
      this.$store.dispatch('hideModal')
    },

    onSubmitEdit(data) {
      this.$store.dispatch('onEditUser', data)
    },

    handleClick(row) {
      this.$store.dispatch('onDelUser', row)
    }
  }
}
</script>
